<template>
    <div class="middle-bg">
        <div id="cgMap" class="map-bg">

        </div>
        <!-- <div class="mask-bg"></div> -->
        <ul class="type-swtich">
            <li @click = "showSjrhMap" class="relative pointer">
                <div class="type-row">
                    一张图
                </div>
                <div></div>
                <img src="../../assets/dp1/switch-bg.png" alt="">
            </li>
            <li v-for="(item,index) in typeList" :key="index" class="relative">
                <div class="type-row">
                    {{item.name}}
                    <div @click="toggleType(item,index)" class="switch-wrapper">
                        <div class="switch-comp" :class="{checked:index==currentTypeIndex}">
                            <div class="switch-circle"></div>
                        </div>
                    </div>
                </div>
                <div></div>
                <img src="../../assets/dp1/switch-bg.png" alt="">
            </li>
        </ul>
        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp1/bottom-bg.png" alt="">
        </div>
        <SJRHModal :visible = "showSjrhModal" @close = "showSjrhModal = false"/>
        <!-- <CgDetail /> -->
    </div>
</template>

<script>
const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");

const classCode1 = require("../../assets/incidentCenter/classCode1.png");
const classCode2 = require("../../assets/incidentCenter/classCode2.png");
const classCode3 = require("../../assets/incidentCenter/classCode3.png");

import features from "./mapData";
import bmapStyle from "./bmap-style.json";
import SJRHModal from "../dp1/sjrhModal";
import CgDetail from "../dp1/cgDetail";

import Pubsub from "../../utils/pubsub";



export default {
    components:{
        SJRHModal,
        // CgDetail,
    },
    data() {
        return {
            showSjrhModal:false,
            currentIndex: 4, //大屏专栏操作列表下标
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1, path: "/dp1" },
                { name: "党建专题", icon: djztIcon, type: 2, path: "/dp2" },
                { name: "政务专题", icon: zwztIcon, type: 3, path: "/dp3" },
                { name: "综治专题", icon: zzztIcon, type: 4, path: "/dp4" },
                { name: "城管专题", icon: cgztIcon, type: 5, path: "/dp5" },
                { name: "", icon: "+", type: 6 }
            ],
            currentTypeIndex: 0,
            typeList: [
                {
                    name: "市容环境类",
                    type: 2
                },
                {
                    name: "街面秩序类",
                    type: 3
                },
                {
                    name: "施工管理类",
                    type: 3
                },
                {
                    name: "突发事件类",
                    type: 3
                },
                {
                    name: "宣传广告类",
                    type: 3
                },
                {
                    name: "其他事件类",
                    type: 3
                }
            ],
            map:null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        showSjrhMap(){
            this.showSjrhModal = true;
        },
        /**
         * 类型切换事件
         */
        toggleType(item, index) {
            this.currentTypeIndex = index;
        },
        initMap() {
            // 百度地图API功能
            let _this = this;
            this.map = new BMap.Map("cgMap");
            var poi = new BMap.Point(114.789722, 36.555262);
            this.map.centerAndZoom(poi, 12);
            this.map.enableScrollWheelZoom();
            function fn1() {
                return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
            }
            var styleOptions;
            function showPolygon() {
                var polygon;
                var pointArr = [];
                for (var i = 0; i < features.length; i++) {
                    pointArr = [];
                    for (
                        var j = 0;
                        j < features[i].geometry.coordinates[0].length;
                        j++
                    ) {
                        var bmap = new BMap.Point(
                            features[i].geometry.coordinates[0][j][0],
                            features[i].geometry.coordinates[0][j][1]
                        );
                        pointArr.push(bmap);
                    }

                    styleOptions = {
                        strokeColor: "#d2cb2d", //随机生成边线颜色。
                        fillColor: "#192758", //随机生成填充颜色。当参数为空时，圆形将没有填充效果。
                        strokeWeight: 2, //边线的宽度，以像素为单位。
                        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                        fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
                        strokeStyle: "solid" //边线的样式，solid或dashed。
                    };

                    polygon = new BMap.Polygon(pointArr, styleOptions); //创建多边形
                    _this.map.addOverlay(polygon);

                    var centerObj = polygon.getBounds().getCenter(); //百度地图api获取的几何图形中心点存在偏差
                    //showText(new BMap.Point(centerObj.lng-0.025,centerObj.lat+0.015),features[i].properties.name);

                    //设置乡镇名称的另一种方式,此方式需要手动获取乡镇的中心点坐标
                    var labelPoint = new BMap.Point(114.820341, 36.574231);
                    if (features[i].properties.name == "肥乡镇") {
                        labelPoint = new BMap.Point(114.801944, 36.570985);
                        // showText(labelPoint, features[i].properties.name);
                    }
                    if (features[i].properties.name == "天台山镇") {
                        labelPoint = new BMap.Point(114.820341, 36.574231);
                        // showText(labelPoint,features[i].properties.name);
                    }
                }
            }
            function showText(point, label) {
                var opts = {
                    position: point, // 指定文本标注所在的地理位置
                    offset: new BMap.Size(0, 0) //设置文本偏移量
                };
                var label = new BMap.Label(label, opts); // 创建文本标注对象
                label.setStyle({
                    color: "black",
                    fontSize: "16px",
                    fillColor: "red" //填充颜色。当参数为空时，圆形将没有填充效果。
                });
                _this.map.addOverlay(label);
            }
            this.map.setMapStyle({ styleJson: bmapStyle });
            //延迟2秒，创建肥乡区地图
            setTimeout(function() {
                showPolygon();
            }, 0);
            this.setMarker({
                icon:classCode1,
                lng:114.801944,
                lat:36.570985
            });
            this.setMarker({
                icon:classCode2,
                lng:114.867197,
                lat:36.547793
            });
            this.setMarker({
                icon:classCode3,
                lng:114.734966,
                lat:36.540139
            });
        },
        setMarker(opt) {
            let pt = new BMap.Point(opt.lng, opt.lat);
            let myIcon = new BMap.Icon(
                opt.icon,
                new BMap.Size(40, 50)
            );
            let marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
            marker2.addEventListener("click", function(e) {
                Pubsub.publish("showCgDetail");
            });
            this.map.addOverlay(marker2);
        },
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.middle-bg {
    width: 1200px;
    margin-top: 84px;
    position: relative;
    // background: url("../../assets/dp4/middle-bg.png") no-repeat;
    .bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1200px;
        position: absolute;
        bottom: 0;
        .bottom-bg {
            margin-left: 30px;
        }
    }
    .bottom-wrapper {
        width: 585px;
        height: 55px;
        // margin-left: 30px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 67px;
    }
    .dp-handle-row {
        text-align: center;
        color: #abd1ff;
        &.active {
            .circle-row {
                opacity: 1;
            }
            color: #f0f7ff;
        }
        .circle-row {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(
                    0deg,
                    #364384 0%,
                    #8d96c2 51%,
                    #e4e8ff 100%
                ),
                linear-gradient(#bfbfbf, #bfbfbf);
            background-blend-mode: normal, normal;
            box-shadow: 1.5px 2.6px 19px 1px rgba(0, 0, 0, 0.96);
            opacity: 0.4;
        }
    }
    .icon-row {
        height: 85px;
        width: 85px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
    }
    .icon {
        z-index: 999;
    }
    .map-bg {
        height: 812px;
        width: 1200px;
        position: relative;
    }
    .mask-bg {
        position: absolute;
        height: 566px;
        width: 1200px;
        top: 0;
        left: 0;
        background: rgba(#000e43, 0.8);
        z-index: 999;
    }
}
.type-swtich {
    position: absolute;
    right: 13px;
    bottom: 50px;
    .type-row {
        height: 70px;
        width: 140px;
        position: absolute;
        color: #dcecff;
        display: flex;
        align-items: center;
        justify-content: center;
        left: -7px;
        top: -1px;
    }
}
.show-type {
    position: absolute;
    bottom: 20px;
    width: 150px;
    background: rgba(0, 73, 202, 0.2);
    padding: 5px 0 5px 22px;
    box-sizing: border-box;
    &-list {
        display: flex;
        align-items: center;
        color: #b6e4ff;
        padding: 8px 0;
        img {
            margin-right: 15px;
        }
    }

    .left-top {
        height: 10px;
        width: 10px;
        border-top: 1px solid #b9d2ff;
        border-left: 1px solid #b9d2ff;
        left: 0px;
        position: absolute;
        top: 0px;
        opacity: 0.6;
    }
    .left-bottom {
        height: 10px;
        width: 10px;
        border-bottom: 1px solid #b9d2ff;
        border-left: 1px solid #b9d2ff;
        left: 0px;
        position: absolute;
        bottom: 0px;
        opacity: 0.6;
    }
    .right-top {
        height: 10px;
        width: 10px;
        border-top: 1px solid #b9d2ff;
        border-right: 1px solid #b9d2ff;
        right: 0px;
        position: absolute;
        top: 0px;
        opacity: 0.6;
    }
    .right-bottom {
        height: 10px;
        width: 10px;
        border-right: 1px solid #b9d2ff;
        border-bottom: 1px solid #b9d2ff;
        right: 0px;
        position: absolute;
        bottom: 0px;
        opacity: 0.6;
    }
}
.switch-wrapper {
    position: absolute;
    right: 7px;
    cursor: pointer;
    .switch-comp {
        height: 28px;
        width: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2c3466;
        .switch-circle {
            height: 12px;
            width: 12px;
            border-radius: 12px;
            position: absolute;
            top: 12px;
            transition: top 0.3s ease-in-out;

            background-image: linear-gradient(180deg, #67a8fa 0%, #0070ff 100%),
                linear-gradient(#0474fe, #0474fe);
            background-blend-mode: normal, normal;

            box-shadow: 1px 1.7px 2px 0px rgba(0, 0, 0, 0.51);
            border-radius: 6.2px;
        }
        &.checked {
            background: #a59c00;

            .switch-circle {
                background-image: linear-gradient(
                        180deg,
                        #fff875 0%,
                        #ddd100 100%
                    ),
                    linear-gradient(#0474fe, #0474fe);
                background-blend-mode: normal, normal;
                top: 3px;
            }
        }
    }
}
</style>